<template>
  <div>
    <div class="box">
      <a-spin :spinning="confirmLoading">

        <j-form-container :disabled="formDisabled">
          <a-form :form="form" slot="detail">
            <a-card size="small" title="业务信息">
              <a-row>
                <a-col :span="12">
                  <a-form-item label="箱东代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-dict-select-tag type="list" v-decorator="['containerCode']"
                                       :trigger-change="true" dictCode="soc" placeholder="请选择箱东代码" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="箱东名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['containerName']" placeholder="请输入箱东名称"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="箱型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-dict-select-tag type="list" v-decorator="['containerType', validatorRules.containerType]"
                                       @change="getBoxType"
                                       :trigger-change="true" dictCode="box_type" placeholder="请选择箱型" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="箱号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['containerNumber', validatorRules.containerNumber]"
                             placeholder="请输入箱号"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="客户业务编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['customerBusinessNumber']" placeholder="请输入客户业务编号"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="新箱/旧箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-dict-select-tag type="radio" v-decorator="['conditionType']" :trigger-change="true"
                                       dictCode="box_condition" placeholder="请选择新箱/旧箱" />
                  </a-form-item>
                </a-col>

                <a-col :span="12">
                  <a-form-item label="进场时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-date @change="getInTime" placeholder="请选择进场时间" v-decorator="['inTime']" :trigger-change="true"
                            style="width: 100%" />
                  </a-form-item>
                </a-col>

                <a-col :span="12">
                  <a-form-item label="出场时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-date @change="getOutTime" placeholder="请选择出场时间" v-decorator="['outTime']" :trigger-change="true"
                            style="width: 100%" />
                  </a-form-item>
                </a-col>
                <!--
                现在系统里已经包含了一部分项目，还缺少几个项目如下：
                客户业务编号(这个编辑栏可以自动显示也可以手动编辑，如果集装箱管理这个模块的箱号在海运出口模块里出现，也就是当海运出口模块里录入了这个箱号，那集装箱管理模块的这个箱号就会自动显示出海运出口里那个箱号对应的客户业务编号，并且这个箱子的状态自动变为”已用”状态，但是当海运出口模块里操作员把这个箱子对应的信息和客户业务编号都删除时，那这个箱子的状态也自动调整回“可用”状态，并且原来显示的客户业务编号也自动删除；
                但是如果这个箱子的业务没有经过海运出口模块的操作，只是在集装箱贸易模块由箱管人员控制，那当箱子发生交易之后，箱管人员在集装箱管理这手动录入箱子的客户业务编号，并且手动把箱子的状态调整为 “已用”状态。 )
                出场时间
                总堆存天数 (系统自动核算=出场时间-进场时间+1)
                超期堆存天数 (系统自动核算=总堆存天数-免费堆存天数)
                超期堆存费  (系统自动核算=场地每个箱型每天的堆存费x超期堆存天数)
                备注
                -->
                <a-col :span="12">
                  <a-form-item label="总堆存天数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input disabled
                             v-decorator="['totalDepositDays',{initialValue: 0}, validatorRules.totalDepositDays]"
                             style="width: 100%" suffix="DAYS(天)" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="免费堆存天数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-decorator="['freeDepositDays',{initialValue: 0}, validatorRules.freeDepositDays]"
                             placeholder="请输入免费堆存天数"
                             @blur="calcOverstockingDays"
                             style="width: 100%" suffix="DAYS(天)" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="超期堆存天数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input disabled
                             v-decorator="['overstockingDays',{initialValue: 0}, validatorRules.overstockingDays]"
                             style="width: 100%" suffix="DAYS(天)" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="超期堆存费" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-row>
                      <a-col :span="10">
                        <a-input disabled v-decorator="['overdueStorageFee',{initialValue: 0}]"
                                 :suffix="overdueStorageFeeSuffix"></a-input>
                      </a-col>
                      <a-col :span="8">
                        <!--                  新建一个可输入单位和堆场费率的字段  overdueStorageFeeUnit-->
                        <a-input type="number" v-decorator="['overdueStorageFeeUnit']"></a-input>
                      </a-col>
                      <a-col :span="6">
                        <j-dict-select-tag v-decorator="['overdueStorageFeeUnitCurrency']"
                                           :trigger-change="true"
                                           dictCode="currency" placeholder="币种" />
                      </a-col>
                    </a-row>


                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="起运港" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-row>
                      <a-col :span="8">
                        <a-select
                          label-in-value
                          v-decorator="['pol',{initialValue: {value:'CNTAO',key:'CNTAO'}}]"
                          placeholder="选择起运港"
                          style="width: 100%"
                          :filter-option="false"
                          show-search
                          allowClear
                          @search="searchPort"
                          @select="portDataChangePol"
                          :dropdownMatchSelectWidth="false"
                          :getPopupContainer="
                        triggerNode => {
                          return triggerNode.parentNode || document.body;
                        }
                      "
                        >
                          <a-select-option v-for="(d,key) in portData" :value="d.value">
                            {{ d.text }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                      <a-col :span="16">
                        <a-input v-decorator="['polDesc']"></a-input>
                      </a-col>
                    </a-row>
                    <!--              <j-popup-->
                    <!--                v-decorator="['pol',{initialValue: 'CNTAO/青岛/QINGDAO'}]"-->
                    <!--                :trigger-change="true"-->
                    <!--                org-fields="show_text"-->
                    <!--                dest-fields="pol"-->
                    <!--                code="port_data"-->
                    <!--                @callback="popupCallback"-->
                    <!--              />-->
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="目的港" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-row>
                      <a-col :span="8">
                        <a-select
                          label-in-value
                          v-decorator="['pod']"
                          placeholder="选择目的港"
                          style="width: 100%"
                          :filter-option="false"
                          show-search
                          allowClear
                          @search="searchPort"
                          @select="portDataChangePod"
                          :dropdownMatchSelectWidth="false"
                          :getPopupContainer="
                        triggerNode => {
                          return triggerNode.parentNode || document.body;
                        }
                      "
                        >
                          <a-select-option v-for="(d,key) in portData" :value="d.value">
                            {{ d.text }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                      <a-col :span="16">
                        <a-input v-decorator="['podDesc']"></a-input>
                      </a-col>
                    </a-row>
                    <!--              <a-input v-decorator="['pod']" placeholder="请输入目的港"></a-input>-->
                    <!--              <j-dict-select-tag type="list" v-decorator="['pod']"-->
                    <!--                                               :trigger-change="true"-->
                    <!--                                 dictCode="dict_port,show_text,wzm" placeholder="请选择目的港" />-->
                    <!--              <j-popup-->
                    <!--                v-decorator="['pod']"-->
                    <!--                :trigger-change="true"-->
                    <!--                org-fields="show_text"-->
                    <!--                dest-fields="pod"-->
                    <!--                code="port_data"-->
                    <!--                @callback="popupCallback"-->
                    <!--              />-->
                    <!--              <j-search-select-tag-->
                    <!--                placeholder="请做出你的选择"-->
                    <!--                v-decorator="['pod']"-->
                    <!--                dict="dict_port,show_text,wzm"-->
                    <!--                :async="true">-->
                    <!--              </j-search-select-tag>-->
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="送箱场地" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select v-decorator="['containerPlace']"
                              placeholder="请选择堆场信息" allowClear showSearch :filter-option="filterOption"
                              @change="changeYardOption" :getPopupContainer="
                        triggerNode => {
                          return triggerNode.parentNode || document.body;
                        }
                      ">
                      <a-select-option v-for="(item, key) in yardInfoOptions" :key="key" :value="item.value">
                        {{ item.text }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-left: -193px">
                    <a-textarea v-decorator="['remark']" placeholder="备注信息" :rows="4" allow-clear
                                showCount></a-textarea>
                  </a-form-item>
                </a-col>
                <!--          <a-col :span="12">-->
                <!--            <a-form-item label="免费用箱时间" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
                <!--              <a-input v-decorator="['freeTimes', validatorRules.freeTimes]" placeholder="请输入免费用箱时间"-->
                <!--                       style="width: 100%" suffix="DAYS(天)" />-->
                <!--            </a-form-item>-->
                <!--          </a-col>-->
                <!--          <a-col :span="12">-->
                <!--            <a-form-item label="生产日期" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
                <!--              <j-date placeholder="集装箱生产日期" v-decorator="['productionDate']" :trigger-change="true"-->
                <!--                      :disabled-date="disabledDate" style="width: 100%" />-->
                <!--            </a-form-item>-->
                <!--          </a-col>-->
              </a-row>
            </a-card>
          </a-form>
        </j-form-container>
        <a-card size="small" title="起运港堆场收费费率">
          <a-table
            style="margin-bottom: 50px;"
            :pagination="false"
            bordered
            size="small"
            :scroll="{x:500,y:300}"
            :loading="jzxDefaultCostDetailsTable.loading"
            :columns="jzxDefaultCostDetailsTable.columns"
            :dataSource="jzxDefaultCostDetailsTable.dataSource" />
        </a-card>


      </a-spin>
    </div>
    <div class="footer">
      <!--      <a-button :style="{ marginRight: '8px' }" @click="close">-->
      <!--        关闭-->
      <!--      </a-button>-->
      <a-button type="primary" @click="handleOk" icon="save" style="margin-right: 20px;z-index: 9">
        保存
      </a-button>
    </div>
  </div>
</template>

<script>
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import pick from 'lodash.pick'
import { getAction, httpAction } from '@/api/manage'
import { getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JDate from '@/components/jeecg/JDate'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import moment from 'moment'
import JEditor from '@/components/jeecg/JEditor'
import Vue from 'vue'
import { ajaxGetDictItems } from '@api/api'

export default {
  name: 'JzxInfoFormWindow',
  mixins: [JEditableTableMixin],
  components: {
    JFormContainer,
    JDate,
    JDictSelectTag,
    JSearchSelectTag,
    JEditor
  },
  data() {
    return {
      portData: [],//港口数据
      getPortDataUrl: '/box/dictPort/findbyname',
      inTime: '',
      outTime: '',
      overdueStorageFeeSuffix: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
        containerNumber: {
          rules: [
            { required: true, message: '请输入箱号!' }
          ]
        },
        containerType: {
          rules: [
            { required: true, message: '请输入箱型!' }
          ]
        },
        // freeTimes: {
        //   rules: [
        //     { required: false },
        //     { pattern: /^-?\d+$/, message: '请输入整数!' }
        //   ]
        // },
        freeDepositDays: {
          rules: [
            { required: false },
            { pattern: /^-?\d+$/, message: '请输入整数!' }
          ]
        },
        totalDepositDays: {
          rules: [
            { required: false },
            { pattern: /^-?\d+$/, message: '请输入整数!' }
          ]
        },
        overstockingDays: {
          rules: [
            { required: false },
            { pattern: /^-?\d+$/, message: '请输入整数!' }
          ]
        }
      },
      refKeys: ['jzxDefaultCostDetails'],
      tableKeys: ['jzxDefaultCostDetails'],
      activeKey: 'jzxDefaultCostDetails',
      // 集装箱标准费用
      jzxDefaultCostDetailsTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '费用名称',
            key: 'costName',
            align: 'center',
            dataIndex: 'costName',
            width: '200px'
          },
          {
            title: '单价',
            key: 'price',
            align: 'center',
            dataIndex: 'price',
            width: '200px'
          },
          {
            title: '计费单位1',
            key: 'unit1_dictText',
            align: 'center',
            dataIndex: 'unit1_dictText',
            width: '200px'
          },
          {
            title: '计费单位2',
            key: 'unit2_dictText',
            align: 'center',
            dataIndex: 'unit2_dictText',
            width: '200px'
          },
          {
            title: '币种',
            key: 'currency',
            align: 'center',
            dataIndex: 'currency',
            width: '200px'
          }
        ]
      },
      url: {
        add: '/box.info/jzxInfo/add',
        edit: '/box.info/jzxInfo/edit',
        queryById: '/box.info/jzxInfo/queryById',
        jzxDefaultCostDetails: {
          list: '/box.info/jzxInfo/queryJzxDefaultCostDetailsByMainId'
        }
      },
      yardInfoOptions: [],
      tempBoxType: '',
      chaoqiFee: 0
    }
  },
  props: {
    //流程表单data
    formData: {
      type: Object,
      default: () => {
      },
      required: false
    },
    editData: {
      type: Object,
      default: null
    },
    editType: {
      type: Boolean,
      default: false
    },
    //表单模式：false流程表单 true普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    }
    // showFlowSubmitButton() {
    //   if (this.formBpm === true) {
    //     if (this.formData.disabled === false) {
    //       return true
    //     }
    //   }
    //   return false
    // }
  },
  created() {
    //如果是流程中表单，则需要加载流程表单data
    this.initSelectOptions()
    if (this.editType) {
      this.editAfter()
    } else {
      this.addBefore()
    }
  },
  methods: {
    moment,
    disabledDate(current) {
      return current && current > moment().endOf('day')
    },
    //初始化堆场费率数据
    initSelectOptions() {
      let a = Vue.ls.get('Login_Userinfo')
      this.orgCode = a.orgCode
      ajaxGetDictItems('yard_info,yard_info_col,id,sys_org_code=\'' + a.orgCode + '\'', null).then((res) => {
        if (res.success) {
          this.yardInfoOptions = res.result
        }
      })
    },
    //堆场费率下拉筛选
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    //选择堆场然后查询相应的费率信息
    changeYardOption(value) {
      console.log(value)
      if (value) {
        let params = { id: value }
        this.jzxDefaultCostDetailsTable.loading = true
        getAction(this.url.jzxDefaultCostDetails.list, params).then((res) => {
          if (res.success) {
            this.jzxDefaultCostDetailsTable.dataSource = res.result
            this.chaoqiFee = 0
            for (let i = 0; i < res.result.length; i++) {
              //判断堆场箱型和表单箱型是否一致
              if (res.result[i].unit1_dictText == this.form.getFieldValue('containerType') && res.result[i].costName == '堆存费') {
                console.log(res.result[i])
                this.chaoqiFee = res.result[i].price
                let cqdcts = this.form.getFieldValue('overstockingDays')
                this.form.setFieldsValue({ 'overdueStorageFee': (cqdcts * this.chaoqiFee).toFixed(2) })
                this.overdueStorageFeeSuffix = res.result[i].currency
                break
              }
            }
          }
          this.jzxDefaultCostDetailsTable.loading = false
        })
      } else {
        this.jzxDefaultCostDetailsTable.dataSource = []
        this.form.setFieldsValue({ 'overdueStorageFee': 0.00 })
        this.form.setFieldsValue({ 'containerPlace': '' })
        this.overdueStorageFeeSuffix = ''
        this.form.setFieldsValue({ 'overdueStorageFeeUnit': 0.00 })
      }

    },
    handleOk() {
      // 发起请求
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          let url = this.url.add
          let formData = values
          if (this.model && this.model.id) {
            url = this.url.edit
            formData['id'] = this.model.id
          }
          if (formData.pol) {
            formData.pol = formData.pol.value
          }
          if (formData.pod) {
            formData.pod = formData.pod.value
          }
          let method = 'post'
          formData.overdueStorageFeeCurrency = this.overdueStorageFeeSuffix
          httpAction(url, formData, method).then((res) => {
            if (res.success) {
              this.model.id = res.result
              this.$message.success(res.message)
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
            // this.$emit('ok')
            // this.close()
            // this.form.resetFields()
          })
        }
      })
    },
    addBefore() {
      this.model = {}
      this.form.resetFields()
      // this.jzxDefaultCostDetailsTable.dataSource = []
    },
    getAllTable() {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      this.model = this.editData
      let fieldval = pick(this.model, 'pol', 'polDesc', 'podDesc', 'productionDate', 'overdueStorageFeeUnit', 'containerCode', 'containerName', 'containerType', 'containerNumber', 'conditionType', 'containerPlace', 'inTime', 'pod', 'freeTimes', 'status', 'outTime', 'customerBusinessNumber', 'overstockingDays',
        'overdueStorageFee', 'remark', 'totalDepositDays', 'freeDepositDays', 'overdueStorageFeeUnitCurrency')
      if (fieldval.pol) {
        fieldval.pol = { value: fieldval.pol, key: fieldval.pol }
      } else {
        delete fieldval['pol']
      }
      if (fieldval.pod) {
        fieldval.pod = { value: fieldval.pod, key: fieldval.pod }
      } else {
        delete fieldval['pod']
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldval)
      })
      if (this.model) {
        if (this.model.containerPlace) {
          this.changeYardOption(this.model.containerPlace)
        }
        this.inTime = this.model.inTime
        this.outTime = this.model.outTime
      }

      // // 加载子表数据
      // if (this.model.id) {
      //   let params = { id: this.model.id }
      //   this.requestSubTableData(this.url.jzxDefaultCostDetails.list, params, this.jzxDefaultCostDetailsTable)
      // }
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)
      return {
        ...main // 展开
      }
    },
    // //渲染流程表单数据
    // showFlowData() {
    //   if (this.formBpm === true) {
    //     let params = { id: this.formData.dataId }
    //     getAction(this.url.queryById, params).then((res) => {
    //       if (res.success) {
    //         this.edit(res.result)
    //       }
    //     })
    //   }
    // },
    validateError(msg) {
      this.$message.error(msg)
    },
    // popupCallback(row) {
    //   // row['pod'] = row['wzm']
    //   this.form.setFieldsValue(pick(row, 'pol', 'polDesc', 'podDesc', 'overdueStorageFeeUnit', 'productionDate', 'containerCode', 'containerName', 'containerType', 'containerNumber', 'conditionType',
    //     'containerPlace', 'inTime', 'pod', 'freeTimes', 'status', 'outTime', 'customerBusinessNumber', 'overstockingDays',
    //     'overdueStorageFee', 'remark', 'totalDepositDays', 'freeDepositDays'))
    // },
    getInTime: function(v) {
      this.inTime = v
      if (this.outTime != '') {
        let diffDay = this.DateDiff(this.outTime, this.inTime)
        if (diffDay + 1 < 0) {
          this.returnBoxDate = ''
          this.$message.warning('出场时间不能早于进场时间')
          this.form.setFieldsValue({ 'inTime': '' })
          this.form.setFieldsValue({ 'totalDepositDays': 0 })
          this.form.setFieldsValue({ 'overstockingDays': 0 })
        } else {
          this.form.setFieldsValue({ 'totalDepositDays': diffDay + 1 })
          let cqdcts = (diffDay + 1) - this.form.getFieldValue('freeDepositDays')
          this.form.setFieldsValue({ 'overstockingDays': cqdcts })
          this.form.setFieldsValue({ 'overdueStorageFee': (cqdcts * this.chaoqiFee).toFixed(2) })
        }
      }
    },
    getOutTime(v) {
      this.outTime = v
      if (this.inTime != '') {
        let diffDay = this.DateDiff(this.outTime, this.inTime)
        if (diffDay + 1 < 0) {
          this.leaveDate = ''
          this.$message.warning('还空箱时间不能早于离场时间')
          this.form.setFieldsValue({ 'outTime': '' })
          this.form.setFieldsValue({ 'totalDepositDays': 0 })
          this.form.setFieldsValue({ 'overstockingDays': 0 })
        } else {
          this.form.setFieldsValue({ 'totalDepositDays': diffDay + 1 })
          let cqdcts = (diffDay + 1) - this.form.getFieldValue('freeDepositDays')
          this.form.setFieldsValue({ 'overstockingDays': cqdcts })
          this.form.setFieldsValue({ 'overdueStorageFee': (cqdcts * this.chaoqiFee).toFixed(2) })
        }
      }
    },
    //计算超期堆存天数
    calcOverstockingDays() {
      //堆存天数
      let dcts = this.form.getFieldValue('totalDepositDays')
      //免费堆存天数
      let free = this.form.getFieldValue('freeDepositDays')
      //超期堆存天数
      let cqdcts = dcts - free
      this.form.setFieldsValue({ 'overstockingDays': cqdcts })
      this.form.setFieldsValue({ 'overdueStorageFee': (cqdcts * this.chaoqiFee).toFixed(2) })
    },
    //选择箱型时按需计算超期堆存费
    getBoxType(v) {
      this.form.setFieldsValue({ 'overdueStorageFee': 0.00 })
      for (let i = 0; i < this.jzxDefaultCostDetailsTable.dataSource.length; i++) {
        if (this.jzxDefaultCostDetailsTable.dataSource[i].unit1_dictText == v && this.jzxDefaultCostDetailsTable.dataSource[i].costName == '堆存费') {
          let chaoqiFee = this.jzxDefaultCostDetailsTable.dataSource[i].price
          let cqdcts = this.form.getFieldValue('overstockingDays')
          this.form.setFieldsValue({ 'overdueStorageFee': (cqdcts * chaoqiFee).toFixed(2) })
          break
        }
      }
    },
    //计算日期差
    DateDiff(sDate1, sDate2) {    //sDate1和sDate2是2002-12-18格式
      let aDate, oDate1, oDate2, iDays
      if (sDate1 != null && sDate2 != null) {
        aDate = sDate1.split('-')
        oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])    //转换为12-18-2002格式
        aDate = sDate2.split('-')
        oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
        iDays = parseInt((oDate1 - oDate2) / 1000 / 60 / 60 / 24)    //把相差的毫秒数转换为天数
        return iDays
      } else {
        return -1
      }

    },
    searchPort(val) {
      let params = { name: val }
      getAction(this.getPortDataUrl, params).then(res => {
        if (res.code == 200) {
          let data = []
          res.result.forEach(item => {
            data.push({
              value: item.wzm,
              text: item.showText
            })
          })
          this.portData = data
        }
      })
    },
    //起运港选择后回显
    portDataChangePol(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      this.form.setFieldsValue({ 'pol': { value: value.key, key: value.key + ' ' } })
      this.form.setFieldsValue({ 'polDesc': portEnName })
    },
    //目的港选择后回显
    portDataChangePod(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      this.form.setFieldsValue({ 'pod': { value: value.key, key: value.key + ' ' } })
      this.form.setFieldsValue({ 'podDesc': portEnName })
    }

  }
}
</script>
<style scoped lang="less">
.box {
  padding-bottom: 60px;
}

.footer {
  padding: 5px;
  height: 40px;
  width: 100%;
  position: absolute;
  background-color: #ffffff;
  bottom: 0;
  left: 0;
  text-align: right;
}

.plclass {
  &::placeholder {
    color: red;
  }
}

/deep/ .ant-table {
  max-height: 300px !important;
}

/deep/ .ant-row .ant-form-item {
  margin-bottom: 0px;
}

</style>